<template>
  <div class="setting_list_container">
    <div class="span_container">
      <span v-for="s in setting_list" :key="s.index" :id="s.index">{{s.item}}</span>
    </div>
    <div class="item_container">
      <el-card class="card" shadow="hover" id="card1" style="display: block">
        <div class="user_avatar">
          <img :src="this.tempImg" alt="" class="img_avatar" id="pic">
          <input type="file" class="select-avatar" @change="changeAvatar"></input>
          <p class="real-select" id="real" @mouseenter="realOn" @mouseleave="realOff">点击更换头像</p>
        </div>
        <div class="user_inf">
          <div class="user_inf_1">
            <p>昵称: {{user_nickname}}</p>
            <button @click="changeNickname">修改昵称</button>
            <div class="input_container" style="display: none" id="nc">
              <input type="text" v-model="new_nickname" placeholder="请填写新的昵称~">
              <span style="content: ''; display: block; background-color: #6cdbeb; width:100%" class="bottom"></span>
            </div>
            <div style="margin-top:-3.5vh; float:right; display: none" id="icon">
              <i class="el-icon-circle-check" id="icon_yes" @click="confirmChangenickname"></i>
              <i class="el-icon-circle-close" id="icon_no" @click="cancelChangenickname"></i>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="user_inf_1">
            <p>个性签名: {{user_signature}}</p>
            <button @click="changeSignature">修改签名</button>
            <div class="input_container" style="display: none" id="nnc">
              <input type="text" v-model="new_usersignature" placeholder="请填写新的签名~">
              <span style="content: ''; display: block; background-color: #6cdbeb; width:100%" class="bottom"></span>
            </div>
            <div style="margin-top:-3.5vh; float:right; display: none" id="iicon">
              <i class="el-icon-circle-check" @click="confirmChangesignature"></i>
              <i class="el-icon-circle-close" @click="cancelChangesignature"></i>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="user_inf_2">
            <p>唠嗑号: {{username}}</p>
          </div>
          <button @click="logOut">退出登录</button>
        </div>
      </el-card>
      <el-card class="card" shadow="hover" id="card2" style="display: none">
        <p style="font-size:20px">登录密码</p>
        <div class="show-password">
          <input type="password" id="showpwd" v-model="userpassword" disabled="true" style="float:left; width: 70%; height:5vh; font-size:20px; color:black"></input>
          <div class="inner-control">
            <i class="el-icon-circle-close" v-show="showPclose" style="font-size:20px; margin-top:0.5vh" id="p_close" @mouseenter="changePclose" @mouseleave="reversePclose" @click="hidePassword"></i>
            <i class="el-icon-view" style="font-size:20px; margin-top:0.5vh;" id="p_one" @mouseenter="changePone" @mouseleave="reversePone" @click="showPassword"></i>
            <i class="el-icon-edit" style="font-size:20px; margin-top:0.5vh; margin-left:2vw" id="p_two" @mouseenter="changePtwo" @mouseleave="reversePtwo" @click="changePassword"></i>
          </div>
        </div>
        <span style="margin-top:5vh; width:80%; height:2vh; color:black"></span>
        <div class="alter-password" id="ap">
          <el-input type="text" id="ap1" placeholder="请输入新的密码" v-model="new_userpassword" style="width:70%; height:4vh; font-size:18px; color:black"></el-input>
          <el-input type="text" id="ap2" placeholder="请确认新的密码" v-model="new_userpassword_confirm" style="width:70%; height:4vh; margin-top:5vh; font-size:18px; color:black"></el-input>
          <div class="alter-btn">
            <button style="width:40%; height:6vh; margin-left:1vw;" @click="confirmChange">确认修改</button>
            <button style="width:40%; height:6vh; margin-left:4vw" @click="giveUpchange">放弃修改</button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "SettingView",
  data(){
    return{
      setting_list: [{index: '1', item: '账号设置'}, {index: '2', item: '安全设置'}],
      tabPosition: 'left',
      colorArray: ['1', '2'],
      user_nickname: '',
      username: '',
      new_nickname: '',
      new_message_notice: true,
      new_message_sound: true,
      file_save_path: 'E:\\WechatFiles\\WeChat Files\\',
      new_file_save_path: '',
      show: false,
      userpassword: '',
      new_userpassword: '',
      new_userpassword_confirm: '',
      showPclose: false,
      tempImg: '',
      user_signature: '',
      new_usersignature: '',
    }
  },
  mounted(){
    /*
    if(localStorage.getItem('is_login') === '1'){
      this.getInfo();
    }

     */
    this.setInfo();
    this.clickColorchange('1');
    this.clickColorchange('2');
  },
  methods:{
    setInfo(){
      this.username = localStorage.getItem('u_id');
      this.userpassword = localStorage.getItem('u_password');
      this.user_signature = localStorage.getItem('u_signature');
      this.user_nickname = localStorage.getItem('u_nickname');
      if(localStorage.getItem('avatarURL') != null){
        this.tempImg = localStorage.getItem('avatarURL');
      }
      else{
        this.tempImg = require('../../assets/defaultAvatar.png');
      }
    },
    setAvatar(avatarSrc){
      this.$store.state.selfAvatar = avatarSrc
      let reader = new FileReader();
      let t = localStorage.getItem('u_token');
      axios.get("http://81.70.70.110:4396/file/download/" + avatarSrc, 
      {headers: {token : t}, responseType: "blob"}).then(res => {
          const that = this;
          reader.onload = function(){
            //将base64格式的图片数据储缓存到本地
            //缓存代理
            localStorage.setItem('avatarURL', reader.result);
            that.$store.state.avatarChangeSign = 1;
          }
          reader.readAsDataURL(res.data);
      })
    },
    /*
    getInfo(){
      let t = localStorage.getItem('u_id');
      let tt = localStorage.getItem('u_token');
      axios.get("http://81.70.70.110:4396/account/info",  {
        params: {key: 'id', scope: 'all', value: t}, headers: {token: tt}
      }).then(res => {
        let j = res.data;
        if (j.code === 200) {
            this.showAvatar(j.data.userAvatar);
            if(j.data.sign === null){
              localStorage.setItem('u_signature', "还没有签名，签个名吧~");
            }
            else {
              localStorage.setItem('u_signature', j.data.sign);
            }
            localStorage.setItem('u_nickname', j.data.userName);
            localStorage.setItem('is_login', '2');
            this.setInfo();

        } else {
        }
      }).catch(err => {
      })
    },

     */
    changePone(){
      let p = document.getElementById('p_one');
      p.style.color = "#6cdbeb"
    },
    reversePone(){
      let p = document.getElementById('p_one');
      p.style.color = "black"
    },
    changePtwo(){
      let p = document.getElementById('p_two');
      p.style.color = "#6cdbeb"
    },
    reversePtwo(){
      let p = document.getElementById('p_two');
      p.style.color = "black"
    },
    changePclose(){
      let p = document.getElementById('p_close');
      p.style.color = "#6cdbeb"
    },
    reversePclose(){
      let p = document.getElementById('p_close');
      p.style.color = "black"
    },
    showPassword(){
      let p = document.getElementById('showpwd');
      p.setAttribute('type', 'text');
      let pp = document.getElementById('p_one');
      this.showPclose = true;
      pp.style.marginLeft = "2vw";
    },
    hidePassword(){
      let p = document.getElementById('showpwd');
      p.setAttribute('type', 'password');
      this.showPclose = false;
      let pp = document.getElementById('p_one');
      pp.style.marginLeft = "0vw";
    },
    changePassword(){
      let p = document.getElementById('ap');
      p.style.display = 'block';
    },
    confirmChange(){
      if(this.new_userpassword !== this.new_userpassword_confirm){
        this.$notify({
          message: '两次输入密码不一致，请重新输入'
        });
        this.new_userpassword = '';
        this.new_userpassword_confirm = '';
      }
      else{
        let t = localStorage.getItem('u_token')
        axios.post("http://81.70.70.110:4396/account/password", null,{params: {password: this.new_userpassword},
          headers: {token: t}
          }).then(res => {
          let j = res.data;
          if (j.code === 200) {
            this.$message.success({
              message: "更改密码成功",
              center: true
            });
            localStorage.setItem('u_password', this.new_userpassword);
            this.new_userpassword = '';
            this.userpassword = localStorage.getItem('u_password');
            let p = document.getElementById('ap');
            p.style.display = 'none';
          } else {
            this.$message.error({
              message: j.msg,
              center: true
            });
            this.username = '';
            this.userpassword = '';
          }
        }).catch(err => {
        })
      }
    },
    giveUpchange(){
      let p = document.getElementById('ap');
      p.style.display = 'none';
      this.new_userpassword = '';
      this.new_userpassword_confirm = '';
    },
    clickColorchange(i){
      let s = document.getElementById(i);
      let c = document.getElementById('card' + i);
      s.addEventListener('click', () => {
        s.style.color = '#6cdbeb';
        c.style.display = 'block';
        for(let j = 0; j < 2; j++){
          if(this.colorArray[j] === i){
            continue;
          }
          else{
            let ss = document.getElementById(this.colorArray[j]);
            let cc = document.getElementById('card' + this.colorArray[j]);
            ss.style.color = 'black';
            cc.style.display = 'none';
          }
        }
      })
    },
    changeNickname(){
      let s = document.getElementById('nc');
      s.style.display = 'block';
      let v = document.getElementById('icon');
      v.style.display = 'block';
    },
    changeSignature(){
      let s = document.getElementById('nnc');
      s.style.display = 'block';
      let v = document.getElementById('iicon');
      v.style.display = 'block';
    },
    confirmChangenickname(){
      let t = localStorage.getItem('u_token');
      axios.post("http://81.70.70.110:4396/account/name", null,
          {params: {name: this.new_nickname},
            headers: {token: t}}).then(res => {
        let j = res.data;
        if(j.code === 200){
          this.$message({
            message: '更改昵称成功',
            type: 'success'
          });
          localStorage.setItem('u_nickname', this.new_nickname);
          this.user_nickname =  localStorage.getItem('u_nickname');
          let s = document.getElementById('nc');
          s.style.display = 'none';
          let v = document.getElementById('icon');
          v.style.display = 'none';
        }
        else{
        }
      }).catch(err => {
      })
    },
    cancelChangenickname(){
      this.new_nickname = '';
      let s = document.getElementById('nc');
      s.style.display = 'none';
      let v = document.getElementById('icon');
      v.style.display = 'none';
    },
    confirmChangesignature(){
      if(this.new_usersignature === "还没有签名，签个名吧~"){
        this.$message({
          message: '这个签名唠嗑用啦，换一个呗',
          type: 'warning'
        });
        this.new_usersignature = '';
      }
      else{
        let t = localStorage.getItem('u_token');
        axios.post("http://81.70.70.110:4396/account/sign", null,
            {params: {sign: this.new_usersignature},
              headers: {token: t}}).then(res => {
          let j = res.data;
          if(j.code === 200){
            this.$message({
              message: '更改签名成功',
              type: 'success'
            });
            localStorage.setItem('u_signature', this.new_usersignature);
            this.user_signature = localStorage.getItem('u_signature');
            this.new_usersignature = '';
            let s = document.getElementById('nnc');
            s.style.display = 'none';
            let v = document.getElementById('iicon');
            v.style.display = 'none';
          }
          else{
          }
        }).catch(err => {
        })
      }
    },
    cancelChangesignature(){
      this.new_usersignature = '';
      let s = document.getElementById('nnc');
      s.style.display = 'none';
      let v = document.getElementById('iicon');
      v.style.display = 'none';
    },
    logOut(){
      let t = localStorage.getItem('u_token')
      axios.post("http://81.70.70.110:4396/account/logout",null, {params:{}, headers: {token: t}}
          ).then(res => {
            let j = res.data;
        if (j.code === 200) {
          this.$message.success({
            message: "已退出唠嗑",
            center: true
          });
          localStorage.clear();
          window.stopTimer()
          this.$store.state.contactlist.newfriends = []
          this.$router.push({path: '/'});
        } else {
          this.$message.error({
            message: j.msg,
            center: true
          });
        }
      }).catch(err => {
      })
    },
    //base64转化为2进制流文件
    dataURItoBlob(dataURI) {
      var byteString = atob(dataURI.split(',')[1]);
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], {type: mimeString});
    },
    uploadAvatar(avatPath){
      let t = localStorage.getItem('u_token');
      axios.post("http://81.70.70.110:4396/account/avatar", null,
          {params: {avatarPath: avatPath}, headers: {token: t}
          }).then(res => {
        let j = res.data;
        if (j.code === 200) {
          this.$message({
            message: '更换头像成功',
            type: 'success'
          });
          this.setAvatar(avatPath);
        } else {
          this.$message.error('系统出错了，请稍后再试');
        }
      }).catch(err => {
      })
    },
    changeAvatar(e){
      let file = e.target.files[0];
      let userid = localStorage.getItem('u_id');
      let t = localStorage.getItem('u_token');
      let reader = new FileReader();
      let formData = new FormData();
      var tempPath = '';
      reader.onload = () => {
        //保证更换头像时及时显示
        this.tempImg = reader.result;
        let blob = this.dataURItoBlob(reader.result)
        formData.append('file', blob, file.name);
        formData.append('type', 'image');
        formData.append('userId', userid);
        axios.post("http://81.70.70.110:4396/file/upload", formData,
            {params: {}, headers: {token: t}
            }).then(res => {
          let j = res.data;
          if (j.code === 200) {
            tempPath = j.data.savedPath;
            this.uploadAvatar(j.data.savedPath);
          } else {
          }
        }).catch(err => {
        })
      }
      reader.readAsDataURL(file);
      //this.uploadAvatar(tempPath);
    },
    changeFilepath(){
      let s = document.getElementById('file_path');
      s.click();
    },
    getFilepath(){
      let f = document.getElementById('file_path');
      this.file_save_path = f.files[0].path.replace(/\\/g, '\\');
    },
    openFile(){
      const {shell} = require('electron').remote;
      if(process.platform === "darwin"){
        shell.showItemInFolder('');
      }
      else{
        shell.openItem(this.file_save_path);
      }
    },
    realOn(){
      let p = document.getElementById('real');
      p.style.color = '#23eefd'
    },
    realOff(){
      let p = document.getElementById('real');
      p.style.color = 'black'
    },

  },
}
</script>

<style scoped>
.setting_list_container{
  width:100%;
  align-items: center;
}
.span_container{
  width: 15%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height:14vh;
  justify-items: center;
  float: left;
}
span{
  width:100%;
  text-align:center;
}
.item_container{
  width:85%;
  display: flex;
  align-items: center;
  height: 100%;
  float: right;
  background: rgb(227, 222, 222);
}
.card{
  width: 80%;
  height: 70%;

  align-items: center;
  margin: 0 auto;
}
.user_avatar{
  width:22vh;
  height:30vh;
  margin-top: 5vh;
  float: left;
  text-align:center;
}
.img_avatar{
  width: 100%;
  height: 75%;
  border-radius:18vh;
}
.avatar-uploader{
  width:25vh;
  height:25vh;
  border-radius:18vh;
  margin-top: 5vh;
  float: left;
  border: 1px dashed #d9d9d9;
  text-align:center;
}
.avatar {
  width: 25vh;
  height: 25vh;
  border-radius:18vh;
  margin-top: 5vh;
  float: left;
  text-align:center;
}
.user_inf{
  width: 70%;
  height: 12vh;
  margin-top: 6vh;
  text-align:left;
  float: right;
}
.user_inf_1{
  height: 70%;
  float: top;
  align-items: center;
}
.user_inf_2{
  height: 30%;
  float: bottom;
}
button{
  width: 14vh;
  height: 5vh;
  margin-top:1.5vh;
  border-radius: 1.5vh;
  border: none;
  outline: none;
  font-size: 2.3vh;
  letter-spacing: 2px;
  cursor: pointer;
  position:relative;
  background: rgba(10, 238, 219, 0.3);
}
button:last-child{
  letter-spacing: 1px;
}
button:hover{
  background: linear-gradient(90deg, #23eefd, #65dfc9, #f2369d, #14dff5);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;
}
button:before{
  content: '';
  position: absolute;
  background:inherit;
  top: -0.5vh;
  right: -0.5vh;
  bottom: -0.5vh;
  left: -0.5vh;
  border-radius: 2vh;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
button:hover:before{
  opacity: 1;
  z-index: -1;
}
.input_container{
  width: 45vh;
  height: 5vh;
  margin-left:10vw;
  margin-top:-5vh;
}
input{
  width:100%;
  height:95%;
  outline: none;
  border: none;
  padding-left: 5px;
  color:#23eefd;
}
.bottom{
  left: 0px;
  right: 0px;
  height:1px;
  width:100%;
}
.bottom{
  bottom: 0px;
}
.switch_container{
  width: 80%;
  margin: auto 0;
  height: 8vh;
}
.file_container{
  width: 100%;
  margin: auto 0;
  height: 2vh;
}
.file_container_btn{
  width: 80%;
  height: 5vh;
  margin-top:3vh;
}
.change-btn{
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
}
.show-password{
  margin-top: 3vh;
  width: 80%;
  height: 30%;
}
.inner-control{
  width:25%;
  float:right;
  align-items: center;
  display: flex;
}
.alter-password{
  margin-top:10vh;
  width:80%;
  height: 50%;
  display: none;
  align-items:center;
}
.alter-btn{
  margin-top:5vh;
  width:70%;
  display: flex;
}
.select-avatar{
  height: 3vh;
  margin-top:1.5vh;
  font-size:2vh;
  outline: none;
  border: none;
  z-index: 1;
  opacity: 0;
}
.real-select{
  height: 3vh;
  margin-top:-3vh;
  font-size:2vh;
}
</style>
